<div style="z-index: 2;position: fixed;top: 0;left: 0">
    <button nz-button nzType="danger" routerLink="/previews">进入previews模块</button>
</div>
<div class="login-bg-section skin-bgc"></div>
<div class="login-content">

    <div class="login-title skin-color">
        XXXXXXXXX管理系统
    </div>
    <form nz-form class="login-form" [formGroup]="loginForm" (ngSubmit)="submitForm()">
        <nz-form-item>
            <nz-form-control>
                <nz-input-group [nzPrefix]="prefixUser" [nzSize]="'large'">
                    <input type="text" nz-input formControlName="username" placeholder="请输入用户名称" autofocus>
                </nz-input-group>
                <nz-form-explain
                    *ngIf="loginForm.get('username').dirty && loginForm.get('username').hasError('required')">
                    请输入用户名
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control>
                <nz-input-group [nzPrefix]="prefixLock" [nzSize]="'large'">
                    <input nz-input type="password" formControlName="password" placeholder="请输入登陆密码">
                </nz-input-group>
                <nz-form-explain
                    *ngIf="loginForm.get('password').dirty && loginForm.get('password').hasError('required')">
                    请输入密码
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control>
                <kylin-verification-code #verificationCode formControlName="validCode"></kylin-verification-code>
                <nz-form-explain
                    *ngIf="loginForm.get('validCode').dirty && loginForm.get('validCode').hasError('required')">
                    请输入验证码
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control>
                <button nz-button nzType="primary" nzSize="large" [nzLoading]="loading"
                        [disabled]="!loginForm.valid" class="login-button">登陆
                </button>
            </nz-form-control>
        </nz-form-item>
        <!--<nz-form-item>-->
        <!--<nz-form-control>-->
        <!--<label nz-checkbox formControlName="agree">-->
        <!--<span>记住密码</span>-->
        <!--</label>-->
        <!--</nz-form-control>-->
        <!--</nz-form-item>-->
    </form>
</div>

<ng-template #prefixUser><i nz-icon type="user" class="login-form-icon"></i></ng-template>
<ng-template #prefixLock><i nz-icon type="lock" class="login-form-icon"></i></ng-template>
